<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <XForm ref="form" :fieldList="fieldList" :options="formOption" :formData="form">
          <template #year>
            <el-date-picker v-model="form.value3" type="year" placeholder="年份" />
          </template>
        </XForm>
      </template>
      <template #toolbar_btns>
        <VButton auth="/pmc/base/plannerConfig/add" type="primary" @click="batchOptionsEvent('add')"> 新增 </VButton>
        <!-- <el-button icon="Plus" type="primary" @click="batchOptionsEvent('add')">新增</el-button> -->
      </template>
    </VTable>

    <ConfirmInput v-model="batchVisible" v-bind="currentConfirm" @submit="handleConfirmSubmit" />
  </VPage>
</template>

<script setup lang="jsx">
import { ElMessage, ElMessageBox } from "element-plus"
import { onMounted, ref, toRefs } from "vue"

import { plannerConfigList, plannerConfigCreate, plannerConfigEdit } from "@/api/base"
import XForm from "@/components/XForm/index.vue"
import ConfirmInput from "@/components/ConfirmInput/index.vue"

const tableRef = ref()
const data = reactive({
  batchVisible: false,
  currentConfirm: {},
})
const { batchVisible, currentConfirm } = toRefs(data)
const batchOConfig = {
  edit: {
    title: "新建配置",
    fieldOptions: [
      {
        label: "组织架构",
        field: "department_id",
        type: "cascaderNew",
        cascaderType: "department",
        placeholder: "组织架构",
        cascaderProps: {
          multiple: false,
          checkStrictly: true,
        },
        style: { width: "100%" },
      },
      {
        label: "计划员",
        field: "planner_user",
        type: "cascaderNew",
        placeholder: "计划员",
        cascaderProps: {
          multiple: false,
        },
        style: { width: "100%" },
      },
      {
        label: "是否启用",
        field: "is_use",
        type: "select",
        options: {
          placeholder: "是否启用",
          data: [
            { label: "是", value: 1 },
            { label: "否", value: 0 },
          ],
        },
        style: { width: "100%" },
      },
    ],
    rules: {
      department_id: [{ required: true, message: "请输入组织架构", trigger: "change" }],
      planner_user: [{ required: true, message: "请选择计划员", trigger: "change" }],
      is_use: [{ required: true, message: "请选择是否启用", trigger: "change" }],
    },
  },
}

const batchOptionsEvent = async (e, params = {}) => {
  console.log(e)
  let confirm = {}
  switch (e) {
    case "add": // 新增
      confirm = batchOConfig.edit
      confirm.form = {}
      break
    case "edit": // 修改
      confirm = batchOConfig.edit
      confirm.form = {
        id: params.id,
        planner_user: params.planner_user,
        department_id: params.department_id,
        is_use: params.is_use,
      }
      break
  }
  confirm.type = e
  currentConfirm.value = confirm
  batchVisible.value = true
}
const handleConfirmSubmit = (param) => {
  console.log(param)
  let params = { ...param }
  let requests = null
  switch (currentConfirm.value.type) {
    case "add": // 新增
      requests = plannerConfigCreate
      break
    case "edit": // 修改
      requests = plannerConfigEdit
      break
    default:
      break
  }
  console.log(params)
  requests(params).then((res) => {
    ElMessage.success(res.message)
    batchVisible.value = false
    nextTick(() => {
      query()
      currentConfirm.value = {}
    })
  })
}
// 查询
const query = () => {
  tableRef?.value.query()
}
// 获取下拉数据
onMounted(() => {})

const formOption = ref({ inline: true })
const publicStyle = { style: { width: "200px" } }
const fieldList = ref([
  {
    field: "department_id",
    type: "cascaderNew",
    cascaderType: "department",
    placeholder: "组织架构",
    cascaderProps: {
      // emitPath: true,
      checkStrictly: true,
    },
    ...publicStyle,
  },
  {
    field: "is_use",
    type: "select",
    options: {
      placeholder: "是否启用",
      data: [
        { label: "是", value: "1" },
        { label: "否", value: "0" },
      ],
    },
    style: { width: "120px" },
  },
  {
    field: "planner_user",
    type: "cascaderNew",
    placeholder: "计划员",
    cascaderProps: {
      emitPath: true,
    },

    ...publicStyle,
  },
])

// 列表配置
const tableOptins = reactive({
  formConfig: {
    data: {},
  },
  // tooltipConfig: {
  //   showAll: true,
  // },
  columns: [
    { field: "id", title: "序号", width: 50 },
    { field: "department_text", title: "组织架构", minWidth: 240 },
    { field: "planner_user_text", title: "计划员", minWidth: 160 },
    { field: "created_by_text", title: "创建人", width: 120 },
    { field: "created_at", title: "创建时间", width: 170 },
    { field: "updated_by_text", title: "最后修改人", width: 120 },
    { field: "updated_at", title: "最后修改时间", width: 170 },
    {
      field: "is_use_text",
      title: "是否启用",
      width: 100,
      slots: {
        default: ({ row }) => <VStatus value={row.is_use == "1"} />,
      },
    },
    {
      title: "操作",
      width: 120,
      fixed: "right",
      slots: {
        default: ({ row }) => (
          <el-button link type="primary" onClick={() => batchOptionsEvent("edit", row)}>
            编辑
          </el-button>
        ),
      },
    },
  ],
  proxyConfig: {
    ajax: {
      query: ({ page, form }) => {
        let params = {
          page: page.pageNum,
          page_num: page.pageSize,
          ...JSON.parse(JSON.stringify(form)),
        }
        console.log(params)
        if (params?.planner_user && params?.planner_user.length) {
          params.planner_user = params.planner_user.map((v) => v.pop())
        }
        // if (params?.department_id && params?.department_id.length) {
        //   console.log(params.department_id.flat())
        //   params.department_id = Array.from(new Set(params.department_id.flat()))
        // }

        return plannerConfigList(params)
      },
    },
  },
})
</script>
<style lang="scss" scoped></style>
